<template>
  <div class="setting-shan-container">
    <div class="applet-blendent-header">设置满减信息</div>
    <el-form :model="configData" label-width="170px" size="small" style="margin: 20px auto">
      <el-form-item label="开启满减">
        <el-switch v-model="configData.is_reduction" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="满减规则" v-for="(item,index) in configData.reduction_achieve" :key="index">
        <span style="padding: 0 15px">满</span>
        <el-input v-model="configData.reduction_achieve[index]" placeholder="请输入" style="width: 15%"/>
        <span style="padding: 0 15px">减</span>
        <el-input v-model="configData.reduction_decrease[index]" placeholder="请输入" style="width: 15%"/>
        <span style="padding: 0 15px">是否包邮</span>
        <el-switch v-model="configData.free_shipping[index]"/>
        <el-button type="text" v-if="index === 0" @click="configData.reduction_achieve.push(''); configData.reduction_decrease.push(''); configData.free_shipping.push(false)">添加</el-button>
        <el-button type="text" v-else @click="configData.reduction_achieve.splice(index,1); configData.reduction_decrease.splice(index,1); configData.free_shipping.splice(index,1)">删除</el-button>
      </el-form-item>
    </el-form>

    <div style="text-align:center;margin-top:15px">
      <el-button type="primary" size="small" style="padding:8px 30px;" @click="save">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { getAppSetting, putAppSetting } from '@/api/setting'
export default {
  name: 'setting-shansong',
  data() {
    return {
      configData: {},
      data: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      getAppSetting({ id: this.$store.state.app.activeApp.saa_id, key: this.$store.state.app.activeApp.saa_key }).then(res => {
        console.log(res.data.reduction_info)
        this.configData = res.data.reduction_info
        this.data = res.data
        delete this.data.delete_time;
        this.configData.id = this.$store.state.app.activeApp.saa_id;
        this.configData.key = this.$store.state.app.activeApp.saa_key;
      })
    },
    save () {
      putAppSetting({...this.data, reduction_info: JSON.stringify(this.configData)}).then(() => {
        this.$message.success('修改成功！');
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-shan-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.applet-blendent-header{
  height: 40px;
  width: 100%;
  line-height: 40px;
  font-size: 16px; 
  font-weight: 600;
  letter-spacing: 2px;
  color: #8f8f8f;
  padding: 0 10px;
  background-color: #F4F8FB;
}
</style>